<template>
    <el-row :gutter="20" class="card-box">
        <template v-for="(data,index1) in props.data" :key="index1">
            <el-col v-for="(item,index2) in data.releaseCallbackPriceList" :key="index2" :span="4">
                <el-row class="card-item" @click.stop="handleChakan1(data)">
                    <el-col :span="24" class="col-img">
                        <img v-if="data.imgUrl" :src="data.imgUrl" style="width:100%;height: 100%;">
                        <div class="box-img-default">
                            <img :src="imgUrlBoxDefault" style="width:40%;">
                        </div>
                        <!-- box-default.png -->
                        <el-row z-index="99" class="marginTop10" style="color:#fff;width: 100%; position: absolute;left: 0;bottom: 0;font-size: 12px;background:#ffa200;padding:0 5px;">
                            <el-col :span="7">回调编号：</el-col>
                            <el-col :span="17">{{data.releaseNo}}</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="text-ellipsis" style="color:#999;">
                        <el-tooltip  class="box-item" effect="dark" :content="data.companyName" placement="top-start" >
                            <span>{{data.companyName}}</span>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <el-row>
                            <el-col :span="8" class="alignLeft text-ellipsis">
                                <el-tooltip  class="box-item" effect="dark" :content="data.carryCityName" placement="top-start" >
                                    <b>{{data.carryCityName}}</b>
                                </el-tooltip>
                            </el-col>
                            <el-col :span="8" class="alignCenter"><img style="text-align: center;padding-top: 3px; width: 16px;" src="@/assets/icons/svg/right.svg"></el-col>
                            <el-col :span="8" class="alignRight text-ellipsis" >
                                <el-tooltip  class="box-item" effect="dark" :content="data.returnCityName" placement="top-start" >
                                    <b>{{data.returnCityName}}</b>
                                </el-tooltip>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <el-row>
                            <el-col :span="6">
                                <template v-for="(boxT,index2) in param.boxType" :key="index2">
                                    <span class="item-info" v-if="boxT.id == item.boxType"><el-col :span="24" >{{boxT.name}}</el-col></span>
                                </template>
                            </el-col>
                            <el-col :span="6">
                                <template v-for="(boxT,index3) in param.boxCondition" :key="index3">
                                    <span class="item-info" v-if="boxT.id == item.boxCondition"><el-col :span="24" >{{boxT.name}}</el-col></span>
                                </template>
                            </el-col>
                            <el-col :span="6">
                                <span class="item-info">{{data.boxUsagePeriod}}天</span>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <el-row>
                            <el-col :span="24" class="alignEnd">
                                <span class="alignEnd-info">{{data.totalInventoryQty}}个</span>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <div class="btm-btn-list">
                            <el-button icon="ChatDotSquare" type="primary" plain @click.stop="handleZixun1(data)" style="width: 40%;">咨询</el-button>
                        
                            <el-button v-if="data.companyId != param.userCompanyId" type="primary"  @click.stop="handleXiaDan1(data)"
                            style="width: 40%;float: right;">下单</el-button>
                        </div>
                    </el-col>    
                </el-row>
            </el-col>
        </template>
    </el-row>
    <div class="clearFix"></div>
    <el-empty v-if="props.data.length == 0" description="当前暂无广告数据" />
    <el-pagination v-if="props.data.length > 0  && config.isPagination" v-model:current-page="param.page.pageNum"
    v-model:page-size="param.page.pageSize" :pager-count="5" :page-sizes="[10, 20, 50, 100]" :total="config.total"
    background layout="total,sizes,prev, pager, next,jumper" @size-change="onHandleSizeChange"
    @current-change="onHandleCurrentChange" size="small" style="float: right;" />
</template>
<script lang="ts" setup>
import { reactive ,computed,onMounted} from 'vue';
import useUserStore from '@/store/modules/user'
import imgUrlBoxDefault from '@/assets/images/box-default.png'
const userStore = useUserStore()
const emit = defineEmits(['pageChange','activInfo','handleChakan','handleXiadan','handleZixun'])
const props = defineProps({
   data:{
    type: Object,
    default: () => { }
  },
  // 配置项
  config: {
    type: Object,
    default: () => { },
  },
})
const param = reactive({
    boxType:[
        {id:5,name:'40HQ'},
        {id:10,name:'40GP'},
        {id:15,name:'20HQ'},
        {id:20,name:'20GP'}
    ],
    boxCondition:[
        {id:5,name:'全新'},
        {id:10,name:'次新'},
        {id:15,name:'适货'},
        {id:20,name:'混提'}  
    ],
    page: {
        pageNum: 1,
        pageSize: 10
    },
    userCompanyId:0
})
// 箱型:boxType 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
// 箱况:boxCondition 5-全新   10-次新  15-适货 20-混提(次新或者适货)

const handleXiaDan1 = (row) => {
    emit('handleXiadan',row)
}
const handleChakan1 = (row) => {
    emit('handleChakan',row)
}
const handleZixun1 = (row) => {
    emit('handleZixun',row)
}
// 分页数量
const onHandleSizeChange = (val: number) => {
  param.page.pageSize = val;
  // tableInstanceRef.value!.clearSelection();
  emit('pageChange', param.page);
};
// 分页页码
const onHandleCurrentChange = (val: number) => {
  param.page.pageNum = val;
  // tableInstanceRef.value!.clearSelection();
  emit('pageChange', param.page);
};
onMounted(() => {
    const user = userStore.getUser() //user信息
    param.userCompanyId = user.companyId
});

</script>
<style lang="scss" scoped>
    .card-box {
    }
    .card-item{
        border: 1px solid #ccc;
        box-shadow: 0 0 5px #aaa;
        border-radius: 5px;
        padding: 10px 10px;
        margin-bottom: 20px;
    }
    .col-img{
        position: relative;
        height: 250px;
        overflow: hidden;
    }
    .marginTop10{
        margin-top: 10px;
    }
    .alignCenter{
        text-align: center;
    }
    .alignLeft{
        text-align: left;
    }
    .alignRight{
        text-align: right;
    }
    .text-ellipsis{
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
    }
    .item-info{
        display: inline-block;
        border: 1px solid #ffa200;
        width: 95%;
        text-align: center;
        border-radius: 3px;
        color: #ffa200;

    }
    .alignEnd{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        .alignEnd-info{
            color: #ffa200;
        }
    }
    .btm-btn-list{
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;
    }
    .box-img-default{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>